<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-12 13:38:49
 -->
<template>
  <div>
    <!-- barcodeDataComp: {{ barcodeDataComp }} <br><br> -->
    <h3>条形码</h3>
    <el-divider />
    <vxe-grid
      ref="table"
      class="grid"
      border
      size="small"
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="barcodeData"
    />
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { specs } from './mixins'
import clonedeep from 'clonedeep'
import { column2emptyObj } from '@/libs/util.js'

export default {
  name: 'Barcode',
  mixins: [oftenuse, specs],
  props: {
    selectSpecsData: {
      type: Array,
      default: () => { return [] }
    },
    /**
     * 单位数据
     */
    unitData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      barcodeData: [],
      ruleValidator: {
      }
    }
  },
  computed: {
    unitColumnsData: function() {
      const unitPriceCols = []
      const unitData = this.unitData || []
      unitData.forEach(item => {
        const title = `条形码/${item.label}`
        const colObj = {
          field: item.value, title,
          cellRender: { name: 'ElInput', props: { size: 'mini' }},
          width: 200
        }
        unitPriceCols.push(colObj)
      })
      return unitPriceCols
    },
    columnsData: function() {
      const specsColumns = this.specsColumns
      const unitColumnsData = this.unitColumnsData
      return [...specsColumns, ...unitColumnsData]
    },
    /**
     * 单个仓库的table数据
     */
    barcodeDataComp: function() {
      const spTableData = clonedeep(this.spTableData)
      const unitObj = column2emptyObj(this.unitColumnsData)
      spTableData.forEach(item => {
        item = Object.assign(item, unitObj)
      })
      return spTableData
    }
  },
  watch: {
    'barcodeDataComp': {
      handler(data) {
        this.barcodeData = data
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    getSingleSkuCodes(row) {
      const unitColumnsData = this.unitColumnsData
      const result = []
      unitColumnsData.forEach(item => {
        const obj = {}
        console.log(item)
        obj.unit = item.field
        obj.barcode = row[item.field]
        result.push(obj)
      })
      return result
    },
    getBarCodePostData() {
      const barcodeData = clonedeep(this.barcodeData)
      const result = []
      barcodeData.forEach(item => {
        const skubars = this.getSingleSkuCodes(item)
        result.push(skubars)
      })
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>
